*{
    margin: 0;
    padding: 0;
}
.title{
    font-size: 70px;
    letter-spacing: 20px;
}
.header-div{
    /* position: fixed; */
    position: relative;
    padding: 150px 0;
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    box-shadow: 1px 10px 10px 0 #eee;
}
.bgi{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.85);
}
.info-title{
    position: relative;
    z-index: 2;
}
.p-10{
    padding: 80px 0 0 0;
}
.bg-gread{
    background-color: #f9f9f9;
}
.myimage{
	transform:rotateY(30deg);
	-webkit-transform:rotateY(30deg);
	box-shadow: 1px 5px 10px 0 #aaa;
}
.skillimg{
	width: 150px;
	height:auto
}
.skillinfo{
	width: 470px;
	height: 100%
}
.pre,.next{
	width: 50px;
	height: 140px;
	float: left;
	display: flex;  
    align-items: center; 
    justify-content: center; 
	border: #eee 1px solid;
	border-radius: 4px;
	cursor: pointer
}
.banner{
	width: 1000px;
	height: 140px;
	float: left;
	overflow: hidden;
}
.sm-banner{
	width: 2000px;
	height: 100%;
	position: relative;
	left: 0;
}

.next:hover{
	background-color: #6c757d;
	color: white
}
.pre:hover{
	background-color: #6c757d;
	color: white;
	
}
/*#6c757d*/

@media(min-width:800px) and (max-width:1200px){
	.banner{
		width: 630px;
		height: 80px
	}
	.sm-banner{
		width: 1260px;
	}
	.pre,.next{
		width: 30px;
		height: 80px
	}
	.skillinfo{
		width: 300px;
		height: 100%;
	}
	.card-text{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis
	}
	.skillinfo>.row>div>img{
		height: 100%;
		width: 100%
	}
}
@media(max-width:800px){
	.banner{
		width: 400px;
		height: 120px
	}
	.sm-banner{
		width: 1600px;
	}
	.pre,.next{
		width: 30px;
		height: 120px
	}
	.skillinfo{
		width: 400px;
		height: 100%;
	}
	.skillinfo>.row>div>img{
		height: 100%;
		width: 100%
	}

}
